<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">流水号</label>
                    <div class="layui-input-block">
                        <input type="text" name="instancecode" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">流程名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="flowname" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">步骤</label>
                    <div class="layui-input-block">
                        <input type="text" name="stepname" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">发起人名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="nickname" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">创建时间</label>-->
<!--                    <div class="layui-input-block">-->
<!--                        <input type="text" name="createtime" placeholder="请输入" autocomplete="off" class="layui-input">-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="layui-inline">-->
<!--                    <label class="layui-form-label">完成时间</label>-->
<!--                    <div class="layui-input-block">-->
<!--                        <input type="text" name="completedtime" placeholder="请输入" autocomplete="off" class="layui-input">-->
<!--                    </div>-->
<!--                </div>-->
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin layui-btn-sm" lay-submit lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-admin layui-btn-sm" title="刷新" data-type="refresh"><i
                        class="layui-icon layui-icon-refresh-3"></i>
                </button>
            </div>

            <table id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>

        </div>
    </div>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    var listUrl = "{:url('Myworkitem/index')}";
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table;
        table.render({
            elem: "#LAY-user-back-manage", url: listUrl, even: true
            ,size:"sm"
            , cellMinWidth: 100
            , cols: [
                [
                    {field: 'id', title: ('id'), hide: true},
                    {field: 'url', title: ('id'), hide: true},
                    {field: 'bizobjectid', title: ('业务表id'), hide: true},
                    {field: 'schemeid', title: "schemeid", hide: true},
                    {field: 'instancestatus', title: "instancestatus", hide: true},
                    {field: 'flowcode', title: "flowcode", hide: true},
                    {field: 'bizscheme', title: "bizscheme", hide: true},
                    {field: "instancecode", align: "center", title: "流水号", hide: true},
                    {field: "flowname", align: "center", title: "流程名称"},
                    {field: "stepname", align: "center", title: "步骤"},
                    {
                        field: "nickname", align: "center", title: "发起人名称"
                    },
                    {field: "createtime", align: "center", title: "创建时间"},
                    {field: "completedtime", align: "center", title: "完成时间"},
                    {
                        field: "instancestatus", align: "center", title: "状态", templet: function (row) {
                            var res = '';
                            var className = '';
                            switch (row.instancestatus) {
                                case 0:
                                    res = '待提交';
                                    className = 'primary';
                                    break;
                                case  1:
                                    res = '审批中';
                                    className = 'info';
                                    break;
                                case 2:
                                    res = '已完成';
                                    className = 'success';
                                    break;
                                case 3:
                                    res = '已取消';
                                    className = 'success';
                                    break;
                                default:
                                    break;
                            }
                            return '<a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs" data-toggle="tooltip" "><span class="label label-' + className + '">' + res + '</span></a>';
                        }
                    }]],
            response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code,
                    "count": res.total, //解析数据长度
                    "data": res.data //解析数据列表
                };
            },
            text: {
                none: '呀！一条数据都没有'
            },
            page: true,
            limit: 20,
        });
        //监听搜索
        form.on('submit(LAY-user-back-search)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('LAY-user-back-manage', {
                where: field
            });
        });
        var active = {
            refresh: function () {
                table.reload('LAY-user-back-manage');
            },

        };
        $('.layui-btn.layuiadmin-btn-admin').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //监听行单击事件（双击事件为：rowDouble）
        table.on('row(LAY-user-back-manage)', function (obj) {
            var data = obj.data;
            var url = '/admin/myworkitem/edit?ids=' + data.bizobjectid + '&taskid=' + data.id + '&table=' + data.bizscheme;
            var title = data.flowname + '(' + data.instancecode + ')';
            top.layui.index.openTabsPage(url, title);  //完成页面跳转
            // layer.open({
            //     type: 2
            //     , title: title
            //     , content: url
            //     , area: ['80%', '80%']
            //     , maxmin: true
            //     // , btn: ['确定', '流程图', '取消']
            //     // , success: function (res) {
            //     //     console.log(data.instancestatus);
            //     // }
            // });

            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });
    });
</script>